<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .container {
            display: flex;
        }

        .sidebar {
            width: 25%;
            background-color: #f1f1f1;
        }

        .sidebar.left {
            margin-right: 4%;
        }

        .sidebar.right {
            margin-left: 4%;
        }

        .content {
            width: 70%;
        }
    </style>
    <title>Document Viewer</title>
</head>
<body>

<div class="container">
    <div class="sidebar left">
        <h3>左侧文档目录</h3>
        <ul id="left-documents">
            <li data-doc-id="doc1">文档1</li>
            <li data-doc-id="doc2">文档2</li>
            <!-- 更多文档... -->
        </ul>
    </div>

    <div class="content">
        <div class="sidebar right">
            <h3>当前文档目录</h3>
            <ul id="right-toc"></ul>
        </div>

        <div class="document-info">
            <h2 id="doc-title"></h2>
            <div id="doc-content"></div>

            <label for="example-select">选择环境:</label>
            <select id="example-select" name="example-select">
                <option value="option1">Option 1</option>
                <option value="option2">Option 2</option>
                <option value="option3">Option 3</option>
                <!-- 更多选项... -->
            </select>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const leftDocuments = document.getElementById('left-documents');
        const rightToc = document.getElementById('right-toc');
        const docTitle = document.getElementById('doc-title');
        const docContent = document.getElementById('doc-content');

        // 示例数据，实际应用中应通过API获取
        const documentsData = [
            {
                id: 'doc1',
                title: '文档1标题',
                content: '<p>文档1内容...</p>',
                toc: [
                    {title: '章节1', anchor: '#section1'},
                    {title: '章节2', anchor: '#section2'}
                ]
            },
            {
                id: 'doc2',
                title: '文档2标题',
                content: '<p>文档2内容...</p>',
                toc: [
                    {title: '章节A', anchor: '#sectionA'},
                    {title: '章节B', anchor: '#sectionB'}
                ]
            }
        ];

        function loadDocument(docId) {
            const docData = documentsData.find(doc => doc.id === docId);

            docTitle.textContent = docData.title;
            docContent.innerHTML = docData.content;

            // 清空并重新填充右侧目录
            rightToc.innerHTML = '';
            docData.toc.forEach(item => {
                const li = document.createElement('li');
                li.textContent = item.title;
                // 简化起见，此处未实现点击目录项跳转功能
                // 在实际应用中，您可以添加相应的事件监听器
                rightToc.appendChild(li);
            });
        }

        leftDocuments.addEventListener('click', function (event) {
            console.log("123=======")
            if (event.target.tagName === 'LI') {
                const docId = event.target.dataset.docId;
                loadDocument(docId);
            }
        });

        // 初始加载第一个文档
        loadDocument('doc1');
    });
</script>
</body>
</html>